{extend name="public/common"}

{block name="style"}
<title>组织架构</title>
<link rel="stylesheet" href="/home/css/structure/index.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="header">
        <div :class="active == 1?'active':''" @click="chooseType(1)">公司简介</div>
        <div :class="active == 2?'active':''" @click="chooseType(2)">组织架构</div>
    </div>
    <div class="body">
        <div class="page" v-show="active == 1">
            <div class="img-box">
                <img :src="detail.image.path">
            </div>
            <div class="article-content" v-html="detail.content"></div>
        </div>
        <div class="page" v-show="active == 2">
            <div class="structure">
<!--                <div class="first-list">-->
<!--                    <div class="title" @click="showChildren($event,first.three.length,first.id)">-->
                    <div class="title" v-for="item in department" @click="toDetail(item.id,item.name)">
                        <p>{{item.name}} ({{item.count}})</p><i class="fa fa-angle-right"></i>
                    </div>
<!--                    <div class="first-content" style="display: none;">-->
<!--                        <div class="second-list" v-for="second in first.three">-->
<!--                            <div class="title" @click="showChildren($event,second.four.length,second.id)">-->
<!--                                <p>{{second.name}}</p><i v-if="second.four.length > 0" class="fa fa-angle-down"></i>-->
<!--                            </div>-->
<!--                            <div class="third-list" style="display: none;">-->
<!--                                <div class="title" v-for="three in second.four" @click="toDetail(three.id)">-->
<!--                                    <p>{{three.name}}</p>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    console.log({$detail})
    console.log({$list})
    var vw = new Vue({
        el: "#app",
        data: {
            detail: {$detail},
            department: {$list}.department,
            active: 1
        },
        created() {
            this.active = window.sessionStorage.getItem('structure_type')?window.sessionStorage.getItem('structure_type'):1;
            console.log(this.active)
            window.sessionStorage.removeItem('structure_type');
        },
        methods: {
            chooseType(type){
                this.active = type;
            },
            toDetail(id,name) {
                window.location.href = '/home/structure/index2/id/'+id+'.html';
                window.sessionStorage.setItem('name',name);
                window.sessionStorage.setItem('structure_type',this.active);
            }
        }
    })
</script>
{/block}
